<template>
    <div>
        <div class="top_box container_box">
            <p class="page-title font-weight-500">请假记录
                <el-tooltip class="item"
                            effect="dark"
                            content="刷新"
                            placement="right">
                    <el-button class="refresh-btn"
                               icon="el-icon-refresh"
                               type="primary"
                               circle
                               plain
                               @click="getTableData"
                               size="mini"></el-button>
                </el-tooltip>
            </p>
            <el-tabs v-model="queryData.status"
                     @tab-click="tabCheck">
                <el-tab-pane v-for="(item, index) in tabList"
                             :key="index"
                             :label="item.name"
                             :name="item.value">
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="padding_box">
            <div class="container_box">
                <div class="order_title">
                    请假列表
                </div>
                <el-divider></el-divider>
                <el-table v-loading="loading"
                          :data="tableData"
                          stripe
                          class="my_table"
                          ref="multipleTable"
                          header-cell-class-name="table-header">
                    <!-- <el-table-column prop="memberId"
                                     label="用户id">
                    </el-table-column> -->
                    <el-table-column prop="childName"
                                     label="请假学生"
                                     align="center">
                    </el-table-column>
                    <el-table-column prop="productName"
                                     label="请假课程"
                                     align="center">
                    </el-table-column>
                    <el-table-column prop="remake"
                                     label="请假原因"
                                     align="center">
                        <template slot-scope="scope">

                            <el-button size="mini"
                                       type="primary"
                                       @click="gTrue(scope.row.content)">查看请假原因</el-button>

                        </template>
                    </el-table-column>
                    <el-table-column prop="leaveTime"
                                     label="请假时间"
                                     align="center">
                        <template slot-scope="scope">
                            {{ scope.row.leaveTime && scope.row.leaveTime.substring(0,10) }}
                        </template>
                    </el-table-column>

                    <!-- 	<el-table-column prop="addTime"
					                 label="记录时间"
					                 align="center">
					</el-table-column> -->

                    <el-table-column label="操作"
                                     fixed="right"
                                     width="180"
                                     align="center">
                        <template slot-scope="scope">

                            <el-button size="mini"
                                       type="success"
                                       v-if="scope.row.status==0"
                                       @click="agree(scope.row.id)">同意</el-button>
                            <el-button size="mini"
                                       type="danger"
                                       v-if="scope.row.status==0"
                                       @click="refuse(scope.row.id)">拒绝</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination background
                                   layout="total, prev, pager, next,sizes, jumper"
                                   :current-page="queryData.pageIndex"
                                   :page-size="queryData.pageSize"
                                   :page-sizes="[5, 10, 20, 40]"
                                   :total="pageTotal"
                                   @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
        </div>
        <!-- 添加弹出框 -->
        <el-dialog title="修改家长"
                   :visible.sync="showEdit"
                   width="50%">
            <el-form :model="currentEditUser"
                     label-width="120px">
                <el-form-item label="家长昵称">
                    <el-input type="text"
                              maxlength="10"
                              show-word-limit
                              v-model="currentEditUser.nickname"></el-input>
                </el-form-item>
                <!-- <el-form-item label="家长手机号码"
                              prop="userName">
                    <el-input type="tel"
                              oninput="value=value.replace(/[^\d]/g,'')"
                              v-model="currentEditUser.telNo"></el-input>
                </el-form-item> -->
            </el-form>
            <span slot="footer"
                  class="dialog-footer">
                <el-button @click="showEdit = false">取 消</el-button>
                <el-button type="primary"
                           @click="saveEditUser"
                           v-preventClick>确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="请假原因"
                   :visible.sync="showEditChildren"
                   width="50%">
            <div id="">
                {{text}}
            </div>
        </el-dialog>
    </div>
</template>

<script>
import axios from '@/utils/axios.js';
import businessCard from '@/components/business-card/business-card.vue'

export default {
    name: 'basetable',
    components: {
        businessCard
    },
    data() {
        return {
            text: "",
            tabList: [{ name: '待审核', value: "0" }, { name: '已通过', value: "1" }, { name: '未通过', value: "-1" }],
            pageTotal: 0,
            loading: false,
            tableData: [],
            classList: [
                { id: 1, name: '一年级', }, { id: 2, name: '二年级', }, { id: 3, name: '三年级', }, { id: 4, name: '四年级', },
                { id: 5, name: '五年级', }, { id: 6, name: '六年级', }, { id: 7, name: '初一', }, { id: 8, name: '初二', }, { id: 9, name: '初三', },
            ],
            queryData: {
                pageNum: 1,
                pageSize: 10,
                status: "0",
            },
            showEditChildren: false,
            showEdit: false,
            schoolItem: {},
            currentEditUser: {},
            currentEditChildren: {},
        };
    },
    watch: {
        schoolItem(newV) {
            console.log('>>>>>>>>>>>>>>>>>>', newV)
            this.currentEditChildren.schoolId = newV.schoolId
            this.currentEditChildren.schoolName = newV.schoolName
        }
    },
    filters: {

    },
    created() {
        this.getTableData();
    },
    methods: {
        gTrue(text) {
            this.showEditChildren = true
            this.text = text
        },
        agree(id) {
            this.$confirm('确定同意当前请假申请？', '提示', {
                type: 'warning'
            }).then(() => {
                let data = {
                    id: id,
                    // status: 1
                }
                axios({
                    url: "/admin/studentLeave/success",
                    method: "POST",
                    data
                }).then(result => {
                    if (result.code == 0) {
                        this.$message.success(result.errMsg || '成功')
                        this.getTableData()
                    } else {
                        this.$message.error(result.errMsg || '失败')
                    }
                })
            }).catch(() => {
            })
        },
        refuse(id) {
            this.$confirm('确定拒绝当前请假申请？', '提示', {
                type: 'warning'
            }).then(() => {
                let data = {
                    id: id,
                    // status: -1
                }
                axios({
                    url: "/admin/studentLeave/refund",
                    method: "POST",
                    data
                }).then(result => {
                    if (result.code == 0) {
                        this.$message.success(result.errMsg || '成功')
                        this.getTableData()
                    } else {
                        this.$message.error(result.errMsg || '失败')
                    }
                })
            }).catch(() => {
            })
        },
        tabCheck(e) {
            console.log("abs")
            console.log("eeee", e.name)
            this.queryData.pageNum = 1
            this.queryData.pageSize = 10
            this.getTableData()
        },
        getTableData() {
            var _this = this;
            this.loading = true
            axios({
                url: "/admin/studentLeave/listPage",
                method: "post",
                data: this.queryData,
            }).then(res => {
                if (res.code == 0) {
                    _this.tableData = res.data && res.data.list || [];
                    _this.pageTotal = res.data.total;
                }
                this.loading = false;
            }).catch(err => {
                this.loading = false;
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.queryData.pageSize = val
            this.getTableData()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.queryData.pageNum = val
            this.getTableData()
        },
        //用户详情
        UserDetails(row) {
            this.$router.push({ path: '/UserDetails', query: { userId: row.id } });
        },
        // 修改家长
        editUser(currentUser) {
            this.currentEditUser = currentUser
            this.showEdit = true
        },
        editChildren(item) {
            this.currentEditChildren = item
            this.schoolItem.schoolId = this.currentEditChildren.schoolId
            this.schoolItem.schoolName = this.currentEditChildren.schoolName
            console.log('>>>>>>>>>>>>>>>>>', this.schoolItem)
            this.showEditChildren = true
        },
        // 修改家长
        saveEditUser() {
            let data = {
                memberId: this.currentEditUser.id,
                nickname: this.currentEditUser.nickname
            }
            axios({
                url: "/admin/member/resetMember",
                method: "post",
                data: data,
            }).then(res => {
                if (res.code == 0) {
                    this.$message.success(res.errMsg || '修改成功')
                    this.showEdit = false
                    this.getTableData()
                } else {
                    this.$message.error(res.errMsg || '修改失败')
                }

            }).catch(err => {

            })
        },
        saveEditChildren() {
            axios({
                url: "/admin/member/updateChildren",
                method: "post",
                data: this.currentEditChildren,
            }).then(res => {
                if (res.code == 0) {
                    this.$message.success(res.errMsg || '修改成功')
                    this.showEditChildren = false
                    this.getTableData()
                } else {
                    this.$message.error(res.errMsg || '修改失败')
                }

            }).catch(err => {

            })
        },
        // 删除家长
        deleteUser(id) {
            this.$confirm('确定要删除当前用户？', '提示', {
                type: 'warning'
            }).then(() => {
                let data = {
                    id: id,
                }
                axios({
                    url: "/user/delete",
                    method: "POST",
                    data
                }).then(result => {
                    if (result.code == 0) {
                        this.$message.success(result.errMsg || '修改成功')
                        this.getTableData()
                    } else {
                        this.$message.error(result.errMsg || '修改失败')
                    }
                })
            }).catch(() => {
            })
        },
    }
};
</script>

<style lang="scss" scoped >
.my-switchStyle {
    margin-right: 25px;
}
.my-switchStyle {
    ::v-deep {
        .el-switch__label {
            position: absolute;
            display: none;
            color: #fff;
        }
        .el-switch__label--left {
            z-index: 9;
            left: 6px;
        }
        .el-switch__label--right {
            z-index: 9;
            left: -16px;
        }
        .el-switch__label.is-active {
            display: block;
        }
        .el-switch__label * {
            font-size: 12px;
        }
        .el-switch__core,
        .el-switch__label {
            width: 52px !important;
        }
    }
}
</style>
<style lang="scss">
.my-autocomplete {
    li {
        line-height: normal;
        padding: 7px;

        .name {
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .addr {
            font-size: 12px;
            color: #b4b4b4;
        }

        .highlighted .addr {
            color: #ddd;
        }
    }
}
</style>
